<template>
    <div class="section-login">
        <div class="box-login-wrapper">
        <div class="box-login card">
            <div class="card-body">
                <!--<el-form class="form-horizontal form-material" id="loginform" action="index.html">-->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                    <h3 class="box-title m-b-20">用户登录</h3>
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <label>用户名</label>
                            <el-form-item prop="username">
                                <el-input v-model="ruleForm.username"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label>密码</label>
                            <el-form-item prop="password">
                                <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="checkbox checkbox-primary pull-left p-t-0">
                                <el-checkbox v-model="ruleForm.rememberPwd">记住密码</el-checkbox>
                            </div> <a href="javascript:void(0)" id="to-recover" class="text-dark pull-right"><i class="fa fa-lock m-r-5"></i>忘记密码？</a> </div>
                    </div>
                    <el-row>
                        <el-col :span="24">
                            <el-button type="primary" class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" @click="submitForm('ruleForm')">登 录</el-button>
                        </el-col>
                    </el-row>
                    <div class="form-group m-b-0">
                        <div class="col-sm-12 text-center">
                            <p>还没有账号？<a href="#/register" class="text-info m-l-5">注册帐号</a> <a href="#/home" class="text-info m-l-5">回到首页</a></p>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import http from "../../lib/http"
export default {
    data: function(){
        return {
            loading : false,
            error_msg : "",
            tip:false,

            ruleForm: {
                username: '',
                password: '',
                rememberPwd : false
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    created : function(){
        http.alive(this,function(){
            location.href="#/"
        },false)
    },
    methods: {

        submitForm(formName) {
            this.loading = true
            const self = this;
            self.$refs[formName].validate((valid) => {
                self.loading = false
                if (valid) {
                    http.login(self,{"username":self.ruleForm.username,"password":self.ruleForm.password}).then(function(res){
                        console.log(res.data.code)
                        if(res.data.code == "fail"){
                            self.$notify.error({
                                title: '错误',
                                message: '账号或密码错误'
                            });
                        }
                        else{
                            localStorage.setItem('access_token',res.data.access_token);
                            localStorage.setItem('ms_username',self.ruleForm.username);
                            //localStorage.setItem("userinfo",JSON.stringify(res.data.data.userinfo));
                            self.$router.push('/mydash');
                            self.$message.success('登录成功!');
                        }
                    })
                } else {
                    self.$notify.error({
                        title: '错误',
                        message: '账号或密码错误'
                    });
                    //console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>
